$stable: #f8f8f8 !default;
page-my-chat {
    .page-container {
        .scroll {
            padding: 10px 0 50px;
        }
        .message-container {
            width: 100%;
        }
        .messages {
            margin-bottom: 20px;
            .message {
                float: right;
                padding: 10px;
                padding-top: 20px;
                transition: all 250ms ease-in-out;
                overflow: hidden;
                text-align: left;
                transform: translate3d(0, 0, 0);
            }
            clear:both;
        }
        .time {
            left: 80%;
            color: #ddd;
            position: absolute;
            width: 120px;
            padding: 0 0 0 0;
            transition: all 250ms ease-in-out;
            transform: translate3d(10px, 0, 0);
        }
        //This will change
        .messages.other {
            .message {
                float: left;
                transform: translate3d(0, 0, 0);
                text-align: right;
            }
            .message.slide-right {
                transform: translate3d(120px, 0, 0);
            }
            span {
                color: black;
                background-color: #C7C7CC;
            }
            .time {
                left: 0%
            }
        }
        span {
            background: #007AFF;
            display: inline-block;
            color: white;
            padding: 10px;
            border-radius: 10px;
            text-align: left;
            max-width: 240px;
        }
    }
    ion-input {
        width: 70%;
        float: left;
    }
    ion-label {
        width: 25%;
        float: right;
    }
}
